<template>
    <div class="header-wrapper">
        <div class="icon"></div>
        <h1 class="text">Tiny Music</h1>
        <router-link tag="div" class="mine" to="/user">
            <i class="icon-mine"></i>
        </router-link>
    </div>
</template>
<script>
  export default {
    name: 'header',
  };
</script>
<style lang='stylus' scoped>
@import '~styl/var'
@import '~styl/mixin'
.header-wrapper
  position relative
  height 44px
  text-align center
  color $color-theme
  font-size 0
  .icon
    icon('logo', 30px, 32px)
    margin-top 6px
    margin-right 9px
  .text
    display inline-block
    line-height 44px
    font-size $font-size-large
  .mine
    position absolute
    right 0
    top 0
    width 44px
    height 44px
    .icon-mine
        display block
        padding 12px
        font-size 20px
        color $color-theme
</style>
